<script setup>
    import { computed, reactive, ref, watch } from 'vue';
    const SCORE_LIST_KEY = 'score-list-key'
    const scoreList = ref(
    JSON.parse(localStorage.getItem(SCORE_LIST_KEY)) || [
            {id:19,subject:'语文',score:94},
            {id:27,subject:'数学',score:59},
            {id:12,subject:'英语',score:92}
        ]
    )
    const scoreForm = reactive({
        subject:'',
        score:''
    })
    const handleAdd = () => {
        if(!scoreForm.subject || !scoreForm.score) {
            return alert('科目或分数不能为空')
        }
        scoreList.value.push({
            ...scoreForm,
            id:Date.now()
        })
        scoreForm.subject = scoreForm.score = ''
    }
    const handleDel = (index) => {
        if(window.confirm('确认删除吗??')){
            scoreList.value.splice(index,1)
        }
    }

    const totalScore = computed(() => {
        return scoreList.value.reduce((prev,item) => prev + item.score,0)
    })
    const avgScore = computed(() => {
        return scoreList.value.length ? totalScore.value / scoreList.value.length : 0
    })

    watch(scoreList,(newVal)=>{
        localStorage.setItem(SCORE_LIST_KEY,JSON.stringify(newVal))
    },{
        deep:true
    })
</script>
    
<template>
    <div class="score-case">
        <div class="table">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>科目</th>
                        <th>成绩</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="scoreList.length > 0">
                    <tr v-for="(item,index) in scoreList" :key="item.id"> 
                        <td>{{ index+1 }}</td>
                        <td>{{ item.subject }}</td>
                        <td :class="{red:item.score < 60}">{{ item.score }}</td>
                        <td><a href="#" @click="handleDel">删除</a></td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        <td colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <span>总分: {{ totalScore }}</span>
                            <span style="margin-left: 50px;">平均分: {{ avgScore }}</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <form class="form">
            <div class="form-item">
                <div class="label">科目: </div>
                <div class="input">
                    <input type="text" placeholder="请输入科目" v-model.trim="scoreForm.subject">
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数: </div>
                <div class="input">
                    <input type="text" placeholder="请输入分数" v-model.number="scoreForm.score">
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                    <button class="submit" @click="handleAdd">添加</button>
                </div>
            </div>
        </form>
    </div>
</template>
    
<style>
.score-case {
    width: 1000px;
    margin: 50px auto;
    display: flex;
}
.score-case .table {
    flex: 4;
}

.score-case .table table {
    width: 100%;
    border-spacing: 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.score-case .table table th {
    background-color: #f5f5f5;
}

.score-case .table table tr:hover td{
    background-color: #f5f5f5;
}

.score-case .table table tr:hover td{
    background: #f5f5f5;
}
.score-case .table table td,
.score-case .table table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    padding: 10px;
} 
.score-case .table table td.red,
.score-case .table table th.red {
    color: red;
} 
.score-case .table .none {
    height: 100px;
    line-height: 100px;
    color: #999;
}
.score-case .form {
    flex: 1;
    padding: 20px;
} 
.score-case .form .form-item {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
} 
.score-case .form .form-item .label {
    width: 60px;
    text-align: right;
    font-size: 14px;
} 
.score-case .form .form-item .input {
    flex: 1;    
} 
.score-case .form .form-item input,
.score-case .form .form-item select {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 200px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
} 
.score-case .form .form-item input::placeholder {
    color: #666;
} 
.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    margin-right: 10px;
    font-size: 12px;
    background: #ccc;
} 
.score-case .form .form-item .submit {
    border-color: #069;
    background: #069;
    color: #fff;
}
</style>